.Divider {

  &:hover {
    .dividerLine {
      width: 1px;
      border-right: 2px solid var(--primary-color);

      &:before {
        background: var(--primary-color);
      }
    }
  }

  .dividerLine {
    margin: 0;
    height: 100%;
    width: 2px;
    border: none;
    border-right: 1px solid #A7ADD0;

    &:before {
      content: '';
      position: absolute;
      border-top: 7px solid white;
      border-bottom: 7px solid white;
      background: #A7ADD0;
      z-index: 2;
      height: 26px;
      top: 50%;
      transform: translateY(-50%);
      width: 2px;
      margin-left: 1px;
    }
  }
}
.Divider.vertical {
  width: 100%;
  cursor: row-resize;
  .dividerLine {
    height: 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #A7ADD0;

    &:before {
      content: '';
      position: absolute;
      border: none;
      top: unset;
      border-left: 7px solid white;
      border-right: 7px solid white;
      background: #A7ADD0;
      z-index: 2;
      width: 26px;
      left: 50%;
      transform: translateX(-50%);
      height: 2px;
    }
  }
}

.Divider.horizontal {
  // height: 100%;
  cursor: col-resize;
}
